<script setup>
import { onMounted, ref } from 'vue'
import { del, get, post, put } from '@/http/http';

const preserveExpanded = ref(true)

let a = JSON.parse(sessionStorage.getItem("consultant"));
let finId = a==null?-1:a.id
    



// 


const tableData = ref([
    {
        id: '2016-05-03',
        userId: 'Tom',
        questionContent: 'California',
        questionTime: 'San Francisco',

        commonUser: {
            id: '1',
            username: 'user1',
            password: 'pas1',
            nickname: '王我'
        },

        psychologicalAnswers: [
            {
                qid: 'qid',
                questionId: 'question_id',
                replierId: 'replier_id',
                answerContent: 'answer_content',
                answerTime: 'CA 94114',

                consultant: {
                    id: '2',
                    username: 'consultant1',
                    password: 'pas1',
                    nickname: 'kuga'
                }
            },
            {
                qid: 'qid',
                question_id: 'question_id',
                replier_id: 'replier_id',
                answer_content: 'answer_content',
                answer_time: 'CA 94114',
                consultant: {
                    id: '3',
                    username: 'consultant2',
                    password: 'pas1',
                    nickname: 'kuga'
                }
            },
        ],
    },

])

//分页 - 移到使用之前来修复初始化错误
const pageNum = ref(1);
const pageSize = ref(100);
const size = ref(4);
const total = ref(5);

onMounted(() => {
    flush();
})

function flush() {
    get("/dmy/psychologicalQuesion/get", {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
        .then((res) => {
            tableData.value = res.data.list;
            pageNum.value = res.data.pageNum;
            pageSize.value = res.data.pageSize;
            size.value = res.data.size;
            total.value = res.data.total;
            console.log(tableData.value)
        })
        .catch((err) => {
            console.log(err);
        })
}

const handleDelete = (row) => {
    if(finId!=-1){
        alert("非管理员无权删除")
        return
    }
    console.log('删除', row.id)
    del("/dmy/psychologicalQuesion/delete", {
        params: {
            id: row.id
        }
    }).then((resp) => {
        console.log(resp)
        flush()
    }).catch((err) => {
        console.log(err)
    })
}

const handleSizeChange = (sizeNew) => {
    pageSize.value = sizeNew;
    flush();
}
const handleCurrentChange = (pageNew) => {
    pageNum.value = pageNew;
    flush();
}

const centerDialogVisible = ref(false)
const questionAddShow = ref()
const questionUpdateshow = ref()
//添加问题
function addQuestionBtn() {
    if(finId!=-1){
        alert("非管理员无权添加问题")
        return
    }
    centerDialogVisible.value = true
    questionAddShow.value = true
    questionUpdateshow.value = false

}

const q_id = ref()
const q_user_id = ref()
const q_question_content = ref()
const q_question_time = ref()
function addQuestion() {
    post("/dmy/psychologicalQuesion/add", {
        "id": q_id.value,
        "userId": q_user_id.value,
        "questionContent": q_question_content.value,
        "questionTime": q_question_time.value
    })
        .then((res) => {
            console.log(res)
            flush()
        })
        .catch((err) => {
            console.log(err);
        })
    q_id.value = ''
    q_user_id.value = ''
    q_question_content.value = ''
    q_question_time.value = ''
    centerDialogVisible.value = false
}

//更新
function questionEditBtn(a) {
    if(finId!=-1){
        alert("非管理员无权编辑问题")
        return
    }
    
    centerDialogVisible.value = true
    questionAddShow.value = false
    questionUpdateshow.value = true
    console.log(a)
    q_id.value = a.id
    q_user_id.value = a.userId
    q_question_content.value = a.questionContent
    q_question_time.value = a.questionTime


}
function updateQuestion() {
    put("/dmy/psychologicalQuesion/update", {
        "id": q_id.value,
        "userId": q_user_id.value,
        "questionContent": q_question_content.value,
        "questionTime": q_question_time.value
    })
        .then((res) => {
            console.log(res)
            flush()
        })
        .catch((err) => {
            console.log(err);
        })
    q_id.value = ''
    q_user_id.value = ''
    q_question_content.value = ''
    q_question_time.value = ''
    centerDialogVisible.value = false
}

//回答问题
const respDialogVisible = ref(false)
const answer_dialog_resp_show = ref(false)
const answer_dialog_update_show = ref(false)

//答案的数据
const answer_table_id = ref()
const answer_table_q_user_id = ref()//这个是问题id，名字起错了
const answer_table_replier_id = ref()
const answer_table_answer_content = ref()
const answer_table_answer_time = ref()
function questionResponseBtn(row) {
    console.log(row)
    if(finId!= -1){
        answer_table_replier_id.value=finId
    }
    respDialogVisible.value = true
    answer_dialog_resp_show.value = true
    answer_dialog_update_show.value = false

    answer_table_q_user_id.value = row.id
}
function huidawenti() {

    console.log(answer_table_q_user_id.value)
    console.log(answer_table_replier_id.value)
    console.log(answer_table_answer_content.value)
    console.log(answer_table_answer_time.value)
    post("/dmy/psychologicalAnswer/add", {
        "questionId": answer_table_q_user_id.value,
        "replierId": answer_table_replier_id.value,
        "answerContent": answer_table_answer_content.value,
        "answerTime": answer_table_answer_time.value
    }).then(

    ).catch()

    answer_table_id.value = ""
    answer_table_q_user_id.value = ""
    answer_table_replier_id.value = ""
    answer_table_answer_content.value = ""
    answer_table_answer_time.value = ""
    
    respDialogVisible.value = false
    flush()
}
function gengxin() {
    console.log(answer_table_id.value)
    console.log(answer_table_q_user_id.value)
    console.log(answer_table_replier_id.value)
    console.log(answer_table_answer_content.value)
    console.log(answer_table_answer_time.value)

    put("/dmy/psychologicalAnswer/update", {
        "id": answer_table_id.value,
        "questionId": answer_table_q_user_id.value,
        "replierId": answer_table_replier_id.value,
        "answerContent": answer_table_answer_content.value,
        "answerTime": answer_table_answer_time.value
    }).then(
    ).catch()
 
    answer_table_id.value = ""
    answer_table_q_user_id.value = ""
    answer_table_replier_id.value = ""
    answer_table_answer_content.value = ""
    answer_table_answer_time.value = ""
    
    respDialogVisible.value = false
    flush()
}
function bianji_answer(row) {
    if(finId!=-1 &&finId!=row.id){
        alert("非管理员，不可操作不属于自己的回答")
        return
    }

    console.log(row)
    respDialogVisible.value = true
    answer_dialog_resp_show.value = false
    answer_dialog_update_show.value = true

    answer_table_id.value = row.id
    answer_table_q_user_id.value = row.questionId
    answer_table_replier_id.value = row.replierId
    answer_table_answer_content.value = row.answerContent
    answer_table_answer_time.value = row.answerTime
}
function shanchu_answer(row) {
    if(finId!=-1 &&finId!=row.id){
        alert("非管理员，不可操作不属于自己的回答")
        return
    }
    console.log(row)
    del("/dmy/psychologicalAnswer/delete",{
        params:{
            id:row.id
        }
    }).then().catch()
    flush()
    console.log(tableData.value)
}
</script>
<template>
    <!-- 问题对话框 -->
    <el-dialog v-model="centerDialogVisible" title="添加" width="500" align-center>
        <div class="dialog-input-class">id:<el-input v-model="q_id" disabled class="d-a-class" /></div>
        <div class="dialog-input-class">q_user_id:
            <el-input v-model="q_user_id" class="d-a-class" />
        </div>
        <div class="dialog-input-class">q_question_content:<el-input v-model="q_question_content" type="textarea"
                class="d-a-class" /></div>
        <div class="dialog-input-class">q_question_time:
            <el-date-picker class="d-a-class" v-model="q_question_time" type="datetime"
                placeholder="Select date and time" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" v-if="questionAddShow" @click="addQuestion">
                    上传
                </el-button>
                <el-button type="primary" v-if="questionUpdateshow" @click="updateQuestion">
                    更新
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 回答对话框 -->
    <el-dialog v-model="respDialogVisible" title="添加" width="500" align-center>
        <div class="dialog-input-class">id:<el-input v-model="answer_table_id" disabled class="d-a-class" /></div>
        <div class="dialog-input-class">question_id:
            <el-input v-model="answer_table_q_user_id" disabled class="d-a-class" />
        </div>
        <div class="dialog-input-class">replier_id:
            <el-input :disabled="finId==-1?false:true" v-model="answer_table_replier_id" class="d-a-class" />
        </div>
        <div class="dialog-input-class">answer_content:<el-input v-model="answer_table_answer_content" type="textarea"
                class="d-a-class" /></div>
        <div class="dialog-input-class">answer_time:
            <el-date-picker class="d-a-class" v-model="answer_table_answer_time" type="datetime"
                placeholder="Select date and time" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="respDialogVisible = false">取消</el-button>
                <el-button type="primary" v-if="answer_dialog_resp_show" @click="huidawenti">
                    回答问题
                </el-button>
                <el-button type="primary" v-if="answer_dialog_update_show" @click="gengxin">
                    更新
                </el-button>
            </div>
        </template>
    </el-dialog>


    <div>问题 <el-button type="primary" size="small" @click="addQuestionBtn">添加问题</el-button></div>
    <el-table :data="tableData" :preserve-expanded-content="preserveExpanded" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                    <p m="t-0 b-2">id: {{ props.row.id }}</p>
                    <p m="t-0 b-2">user_id: {{ props.row.commonUser.username }}</p>
                    <p m="t-0 b-2">question_content: {{ props.row.questionContent }}</p>
                    <p m="t-0 b-2">question_time: {{ props.row.questionTime }}</p>
                    <h3>回答</h3>
                    <el-table :data="props.row.psychologicalAnswers">
                        <el-table-column label="qid" prop="qid" />
                        <el-table-column label="question_id" prop="questionId" />
                        <el-table-column label="replier_id" prop="consultant.username" />
                        <el-table-column label="answer_content" prop="answerContent" />
                        <el-table-column label="answer_time" prop="answerTime" />
                        <el-table-column label="操作列表">
                            <template #default="scope">
                                <div>
                                    <el-button type="primary" size="small"
                                        @click="bianji_answer(scope.row)">编辑</el-button>
                                    <el-button type="danger" size="small"
                                        @click="shanchu_answer(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="id" prop="id" />
        <el-table-column label="user_id" prop="commonUser.username" />
        <el-table-column label="question_content" prop="questionContent" />
        <el-table-column label="question_time" prop="questionTime" />

        <el-table-column label="操作列表" width="280">
            <template #default="scope">
                <div>
                    <el-button type="primary" size="small" @click="questionEditBtn(scope.row)">编辑</el-button>
                    <el-button type="info" size="small" @click="questionResponseBtn(scope.row)">回答</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[2, 5, 10]" :size="size"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<style lang="less" scoped></style>